<template>
  <div :id="id" style="width: 100%; height: 260px"></div>
</template>
<script>
// 引入echarts
import * as echarts from "echarts";
import { onMounted } from "vue";
import { reactive, ref, toRefs } from "vue";
import {
  UsergroupAddOutlined,
  PartitionOutlined,
  HistoryOutlined,
} from "@ant-design/icons-vue";

export default {
  name: "lineChart",
  props: {
    id: {
      type: String,
      default: "id",
    },
    chartTitle: {
      type: String,
      default: "标题",
    },
    list: {
      type: Array,
      default: [],
    },
    color: {
      type: String,
      default: "标题",
    },
    unit: {
      type: String,
      default: "",
    }
  },
  components: {
    UsergroupAddOutlined,
    PartitionOutlined,
    HistoryOutlined,
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const chart = echarts.init(document.getElementById(this.id));
      const option = {
        title: {
          text: this.chartTitle,
        },
        backgroundColor: "",
        toolbox: {
          feature: {
            saveAsImage: { title: "另存为图片" },
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [this.chartTitle],
          textStyle: {
            fontSize: 14,
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          axisLabel: {
            textStyle: {
              fontSize: 14, // 更改坐标轴文字大小
            },
          },
          axisLine: {
            lineStyle: {},
          },
          boundaryGap: false,
          type: "category",
          data: Array.from({ length: 24 }, (v, k) => k),
          axisTick: {
            alignWithLabel: true,
          },
        },
        yAxis: {
          name: this.unit,
          type: "value",
          axisLabel: {
            textStyle: {
              fontSize: 14, // 更改坐标轴文字大小
            },
          },
        },
        series: [
          {
            name: this.chartTitle,
            data: this.list,
            type: "line",
            color: this.color,
          },
        ],
        animation: false,
      };
      //定义方法
      chart.setOption(option, true);
    },
  },
};
</script>
<style>
</style>